<script setup lang="ts">
import access from '../imgs/access.png';
import chart from '../imgs/chat.png';
import rocket from '../imgs/rocket.png';

const list = computed(() => [
  { img: rocket, title: $t('wQZhhCogjbikLDtmRcQr'), tip: $t('5s2lVhlKyjc7kIqFvRvP') },
  { img: chart, title: $t('0Rx6QgK5BxEzy4a_1Wvm6'), tip: $t('ouWgZaDju3yByz90lWeq4') },
  { img: access, title: $t('dbroZFoJtTQidXq7Xnlz4'), tip: $t('pS76ysNjHxJtlxlucJiPd') },
]);
</script>

<template>
  <div class="flex-between flex-wrap items-stretch gap-7.5 lt-tabletl:(flex-col gap-4)">
    <TCard v-for="item in list" :key="item.title" class="card">
      <div class="flex items-center gap-30px lt-tabletl:gap-15px">
        <div class="h-auto max-w-35 lt-mobile:max-w-88px">
          <img :src="item.img" class="w-full object-cover">
        </div>
        <div class="min-h-42 flex flex-1 flex-col leading-normal lt-tabletl:min-h-auto">
          <div class="mb-2 text-5! lt-tabletl:text-4!">
            {{ item.title }}
          </div>
          <div class="text-sys-text-body text-4! lt-tabletl:text-3.5!">
            {{ item.tip }}
          </div>
        </div>
      </div>
    </TCard>
  </div>
</template>

<style scoped lang="scss">
.card {
  --uno: 'from-sys-layer-d to-sys-layer-a w-28% !px-8.5 !py-5 rounded-2 bg-sys-layer-a lt-tabletl:(w-full min-w-full !px-4) flex-1 min-w-450px';
  box-shadow: 0px -4px 0px 0px rgba(0, 0, 0, 0.25) inset;
}
</style>
